<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: scroll;
        }
        .el-header, .el-footer {
            color: #333;

        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
        }

    </style>
</head>
<body>
<div id="app" style="width: 100%;height: 100%;">
    <el-container>
        <el-main width="80%">
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="outListId"
                            label="ID"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="名称"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="number"
                            label="数量"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="state"
                            label="状态"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="canOut"
                            label="可否发货"
                            width="*">
                    </el-table-column>
                    <el-table-column width="180">
                        <template slot-scope="scope">
                            <el-button @click="check(scope.row)" type="primary" icon="el-icon-check" size="small"  :disabled="canFix(scope.row.state)||canFixOut(scope.row.canOut)"></el-button>
                            <el-dialog fullscreen="true" title="信息" :visible.sync="dialogFormVisible1" style="text-align: left!important;" >
                                <el-form :model="form1">
                                    <el-form-item label="ID" :label-width="formLabelWidth">
                                        <el-input v-model="form1.outListId" autocomplete="off" readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="名称" :label-width="formLabelWidth">
                                        <el-input v-model="form1.name" autocomplete="off" readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="数量" :label-width="formLabelWidth">
                                        <el-input v-model="form1.number" autocomplete="off" readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="状态" :label-width="formLabelWidth">
                                        <el-input v-model="form1.state" autocomplete="off" readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="可否发货" :label-width="formLabelWidth" >
                                        <el-input v-model="form1.canOut" autocomplete="off" readonly></el-input>
                                    </el-form-item>
                                    <el-form-item label="物流信息" :label-width="formLabelWidth">
                                        <el-input v-model="form1.logisticsInformation" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">

                                    <el-button @click="dialogFormVisible1 = false">取消分发</el-button>
                                    <!--                                    @click="dialogFormVisible1 = false,fixPerson()"-->
                                    <el-button type="primary" @click="dialogFormVisible1 = false,checkFixOutList()" >确定分发</el-button>
                                </div>
                            </el-dialog>

                            <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="small" :disabled="canFix(scope.row.state)"></el-button>
                            <!--                            页面已完成 只差数据保存删除的操作-->
                            <el-dialog fullscreen="true" title="信息" :visible.sync="dialogFormVisible2" style="text-align: left!important;" >
                                <el-form :model="form2">
                                    <el-form-item label="数量" :label-width="formLabelWidth">
                                        <el-input v-model="form2.number" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">

                                    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                    <el-button type="primary" @click="dialogFormVisible2 = false,fixOutList()">确 定</el-button>
                                </div>
                            </el-dialog>

<!--                            <el-button  type="danger" icon="el-icon-delete" size="small" @click="open(scope.$index, scope.row.outListId)" :disabled="canFix(scope.row.state)"></el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-main>
    </el-container>
</div>


<script>
    let app = new Vue({
        el: '#app',
        data(){
            return{
                // 到时调用数据库 直接调用数据
                role: '',
                tableData: [],
                dialogVisible: false,
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dialogFormVisible2: false,
                // 表单内容稍后再改
                form: {
                    // outListId:'',
                    name: '',
                    number: '',
                },
                formLabelWidth: '120px',
                form1: '',
                form2: '',
            }

        },
        // 初始化函数
        created:function(){
            this.getAllOutList();
        },
        methods:{
            canFix(state)
            {
                return state==="已分发";
            },
            canFixOut(canOut){
                return canOut!=="可以出货";
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // 获取所有进货单
            getAllOutList(){
                axios.post('/out/getAllOutList'
                ).then(function (res) {
                    console.info(res.data);
                    // let list =$.parseJSON(res.data);
                    let list = res.data;
                    let bufferList = [];
                    for(let key in list) {
                        let i = new Object();
                        i.outListId = list[key].outlistid;
                        i.name=list[key].tempName;
                        i.number = list[key].exportnumber;
                        i.state = list[key].state;
                        i.canOut = list[key].canOut;
                        bufferList.push(i);
                    }
                    app.tableData = bufferList;
                    console.info(app.tableData);

                }).catch(function (error) {
                    console.log(error);
                });
            },
            // 判定
            canOut(){
                axios.post('/out/canOut',
                    "name="+this.form.name+
                    "&number="+this.form.number
                ).then(function (res) {
                    console.info(res.data);
                    if (res.data==='添加成功'){
                        app.getAllOutList();
                        app.addSuccess();
                        app.form.name='';
                        app.form.number="";
                    }
                    else if(res.data==='没有该货物'){

                        app.addFail();
                        // setTimeout(function(){window.location.assign('/WarehouseManage/ingoodManage');},2000);
                        app.form.name='';
                        app.form.number="";
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            // 添加成功
            addSuccess(){
                this.$message({
                    message:'添加成功',
                    type:'success'
                });
            },
            addFail(){
                this.$message({
                    message:'没有该货物,请进行进货',
                    type:'danger'
                });
            },
            // 入库按钮响应事件
            check(row){
                this.dialogFormVisible1 = true;
                console.log(row);
                this.form1 = row;
            },
            // 分发操作
            checkFixOutList(){
                axios.post('/out/fixOutList',
                    "outListId="+this.form1.outListId+
                    "&exportNumber="+this.form1.number+
                    "&logisticsInformation="+this.form1.logisticsInformation+
                    "&state="+"已分发"
                ).then(function (res) {
                    console.info(res.data);
                    window.location.reload();
                }).catch(function (error) {
                    console.log(error);
                });
            },
            // 编辑按钮响应事件
            edit(row){
                this.dialogFormVisible2 = true;
                console.log(row);
                this.form2 = row;
            },
            // 修改操作
            fixOutList(){
                axios.post('/out/fixOutList',
                    "outListId="+this.form2.outListId+
                    "&exportNumber="+this.form2.number+
                    "&logisticsInformation="+''+
                    "&state="+'未分发'
                ).then(function (res) {
                    console.info(res.data);
                    app.fixSuccess();
                    setTimeout(function () {window.location.reload();},2000);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            // 修改成功
            fixSuccess(){
                this.$message({
                    message:'修改成功',
                    type:'success'
                });
            },
            // // 点开删除按钮时弹出的确定框
            // open(index,id) {
            //     this.$confirm('此操作将永久删除该发货单, 是否继续?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         app.deleteOutList(index,id);
            //         this.$message({
            //             type: 'success',
            //             message: '删除成功!'
            //         });
            //     }).catch(() => {
            //         this.$message({
            //             type: 'info',
            //             message: '已取消删除'
            //         });
            //     });
            // },
            // // 删除操作
            // deleteOutList(index,id){
            //     axios.post('/out/deleteOutList',
            //         "outListId="+id
            //     ).then(function (res) {
            //         console.info(res.data);
            //         if(res.data==='删除成功'){
            //             app.tableData.splice(index, 1);
            //             setTimeout(function () {
            //                 window.location.reload();
            //             },2000);
            //         }
            //
            //     }).catch(function (error) {
            //         console.log(error);
            //     });
            // }
        }
    })
</script>
</body>
</html>